<template>
	<view class="sj">
		<view class="message_top">
			<view class="message_top_title" :style="{top:computedTop}">
				<view :class="item.isA?'message_top_tab1':'message_top_tab'" v-for="(item,index) in tab" :key="index"
					@click="Ctab(item)">
					{{item.name}}
				</view>
			</view>
			<view class="message_top_back" :style="{top:computedTop}" @click="Back">
				<image src="../../static/search/back.png" class="bfbimages"></image>
			</view>
		</view>

		<template v-if="tab[0].isA">
			<view class="index_info">
				<view>
					<view class="flex">
						<image :src="ShangJiaInfo.merchant_avatar" class="bfbimages"></image>
					</view>
					<view>
						<view class="ellipsis">{{ShangJiaInfo.merchant_name}}</view>
						<view>
							<view class="flex"
								style="width: 22rpx;height: 24rpx;text-align: center;line-height: 24rpx;margin-right: 10rpx;margin-left: 10rpx;">
								<image :src="ShangJiaInfo.icon" class="bfbimages"></image>
							</view>
							<text style="display: inline-block;margin-right: 10rpx;">{{ShangJiaInfo.name}}</text>
						</view>
					</view>
				</view>
				<view style="background: linear-gradient(270deg, #FE4624 0%, #FF8143 100%);" @click="BianJi">
					<text>编辑</text>
				</view>
			</view>

			<view class="index_images">
				<u-swiper :list="ShangJiaInfo.merchant_banner" indicator indicatorMode="line" circular
					:height='200'></u-swiper>
			</view>

			<view class="index_map">
				<view>
					<view class="flex"
						style="width: 31rpx;height: 35rpx;text-align: center;line-height: 35rpx;margin-right: 15rpx;">
						<image src="../../static/dinwei.png" class="bfbimages"></image>
					</view>
					<view class="ellipsis textmap">{{ShangJiaInfo.address}}{{ShangJiaInfo.address_detail}}</view>
				</view>
				<view @click="DaoHnag">
					<view class="flex"
						style="width: 20rpx;height: 20rpx;text-align: center;line-height: 20rpx;margin-right: 10rpx;">
						<image src="../../static/dh.png" class="bfbimages"></image>
					</view>
					<text>导航</text>
				</view>
			</view>

			<view class="index_js">店铺简介</view>
			<view class="index_js_text">{{ShangJiaInfo.desc}}</view>
		</template>

		<template v-if="tab[1].isA">
			<view class="index_info">
				<view>
					<view class="flex">
						<image :src="ShangJiaInfo.merchant_avatar" class="bfbimages"></image>
					</view>
					<view>
						<view class="ellipsis">{{ShangJiaInfo.merchant_name}}</view>
						<view>
							<view class="flex"
								style="width: 22rpx;height: 24rpx;text-align: center;line-height: 24rpx;margin-right: 10rpx;margin-left: 10rpx;">
								<image :src="ShangJiaInfo.icon" class="bfbimages"></image>
							</view>
							<text style="display: inline-block;margin-right: 10rpx;">{{ShangJiaInfo.name}}</text>
						</view>

						<view>
							<view class="flex"
								style="width: 22rpx;height: 24rpx;text-align: center;line-height: 24rpx;margin-right: 10rpx;margin-left: 10rpx;">
								<image src="../../static/cj.png" class="bfbimages"></image>
							</view>
							<text
								style="display: inline-block;margin-right: 10rpx;">商家积分：{{ShangJiaInfo.credit_nums}}</text>
						</view>
					</view>
				</view>
				<view style="width: 16rpx;height: 20rpx;text-align: center;line-height: 24rpx;background-color:#fefbf8;"
					class="flex">
					<image src="../../static/hei_right.png" class="bfbimages"></image>
				</view>
			</view>

			<view class="index_data">
				<view>
					<view v-for="(item,index) in gn" :key="index">
						<view>{{item.num}}</view>
						<view>{{item.name}}</view>
					</view>
				</view>

				<view>
					<view>
						<view class="flex"
							style="width: 26rpx;height: 26rpx;text-align: center;line-height: 26rpx;margin-right: 10rpx;">
							<image src="../../static/or_sys.png" class="bfbimages"></image>
						</view>
						<text>扫码核销</text>
					</view>
					<view @click="Ccjianhb">
						<view class="flex"
							style="width: 26rpx;height: 26rpx;text-align: center;line-height: 26rpx;margin-right: 10rpx;">
							<image src="../../static/bai_jia.png" class="bfbimages"></image>
						</view>
						<text>创建红包</text>
					</view>
				</view>
			</view>

			<view class="index_sele">
				<view :class="item.isA?'index_sele_tab1':'index_sele_tab'" v-for="(item,index) in sele" :key="index"
					@click="Csele(item)">{{item.name}}</view>
			</view>

			<view class="index_for" v-for="(item,index) in ShangJiaList" :key="index">
				<view class="index_for_one">
					<view class="index_for_one_L">
						<view class="flex">
							<image src="../../static/hbx.png" class="bfbimages" v-if="item.type==1"></image>
							<image src="../../static/hb_zt/hongc.png" class="bfbimages" v-if="item.type==2"></image>
							<image src="../../static/hb_zt/hongz.png" class="bfbimages" v-if="item.type==3"></image>
							<image src="../../static/hb_zt/hongb.png" class="bfbimages" v-if="item.type==4"></image>
						</view>
						<text style="display: inline-block;margin-right: 12rpx;">{{item.name}}</text>
						<view class="index_for_one_LHb">
							<text v-if="item.red_type==2">随机</text>
							<text v-else>均分</text>
						</view>
						<view class="index_for_one_LHb" style="width: 110rpx;" v-if="item.is_forward==1">转发佣金</view>
					</view>
					<view class="index_for_one_R">￥{{item.total_money}}/{{item.total_nums}}份</view>
				</view>

				<view class="index_for_two" @click="LinkLqu">
					<view class="index_for_two_L">
						<view>
							<image :src="item.member.activity_user_record[0].avatar" class="bfbimages"></image>
						</view>
						<view>
							<image :src="item.member.activity_user_record[1].avatar" class="bfbimages"></image>
						</view>
						<view>
							<image :src="item.member.activity_user_record[2].avatar" class="bfbimages"></image>
						</view>
						<view>
							<image :src="item.member.activity_user_record[3].avatar" class="bfbimages"></image>
						</view>
					</view>
					<view class="index_for_two_R">
						<text>共{{item.member.activity_user_count}}人领取</text>
						<view class="flex">
							<image src="../../static/hei_right.png" class="bfbimages"></image>
						</view>
					</view>
				</view>

				<view class="index_for_therr">
					<text>剩余金额：<text style="color: #333333;">￥{{item.remaining_money}}</text></text>
				</view>
				<view class="index_for_therr">
					<text>到期日期：{{item.expire_time}}</text>
				</view>
				<view class="index_for_therr">
					<text>发放范围：{{item.coordinate}}</text>
				</view>
				<view class="index_for_therr" style="justify-content: space-between;">
					<text>发布于{{item.create_time}}</text>
					<text style="color: #FE4825;" v-if="item.status==0">进行中</text>
					<text style="color: #FE4825;" v-if="item.status==1">已完成</text>
					<text style="color: #999999;" v-if="item.status==3">已过期</text>
				</view>
			</view>
			
			<view style="width: 100%;height: 250rpx;text-align: center;line-height: 250rpx;font-size: 28rpx;color: #999999;">没有更多啦~</view>
		</template>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: null,
				tab: [{
						name: '基本资料',
						isA: true
					},
					{
						name: '商家中心',
						isA: false
					}
				],
				gn: [{
						name: '现金红包',
						num: '0'
					},
					{
						name: '优惠券',
						num: '0'
					},
					{
						name: '邀约红包',
						num: '0'
					},
					{
						name: '折扣红包',
						num: '0'
					},
					{
						name: '进行中',
						num: '0'
					},
					{
						name: '已完成',
						num: '0'
					},
					{
						name: '已过期',
						num: '0'
					},
					{
						name: '累计金额',
						num: '0'
					}
				],
				sele: [{
						name: '全部',
						isA: true
					},
					{
						name: '现金',
						isA: false
					},
					{
						name: '优惠券',
						isA: false
					},
					{
						name: '折扣',
						isA: false
					},
					{
						name: '邀约',
						isA: false
					}
				],
				ShangJiaInfo: '',
				type: 0, //类型 类型 1=红包,2=优惠券,3=邀约,4=折扣价
				page: 1,
				ShangJiaList:''
			}
		},
		computed: {
			computedTop() {
				if (this.menuButtonInfo) {
					return `${this.menuButtonInfo.height * 2 - 6}px`;
				}
				return '0px';
			},
		},
		onLoad() {
			const info = uni.getMenuButtonBoundingClientRect();
			this.menuButtonInfo = info;
		},
		onShow() {
			this.ShangJiaInfoApi()
			this.ShangJiaDataApi()
			this.ShangJiaLisyApi()
		},
		onReachBottom() {
			this.page++
			let data = {
				page: this.page,
				type: this.type
			}
			this.$request('/api/merchant/merchantActivity', data).then((res) => {
				console.log(res.data.data, '商家活动列表');
				this.ShangJiaList = this.ShangJiaList.concat(res.data.data);
				this.$forceUpdate()
			})
		},
		methods: {
			ShangJiaLisyApi() {
				let data = {
					page: this.page,
					type: this.type
				}
				this.$request('/api/merchant/merchantActivity', data).then((res) => {
					console.log(res.data.data, '商家活动列表');
					this.ShangJiaList=res.data.data
					this.$forceUpdate()
				})
			},
			ShangJiaDataApi() {
				this.$request('/api/merchant/activityItem').then((res) => {
					console.log(res.data, '商家活动数据统计');
					this.gn[0].num = res.data.red_envelope_count //红包活动数量
					this.gn[1].num = res.data.coupon_count //优惠券数量
					this.gn[2].num = res.data.invite_count //邀约数量
					this.gn[3].num = res.data.discount_count //折扣数量
					this.gn[4].num = res.data.ongoing_count //进行中数量
					this.gn[5].num = res.data.completed_count //完成数量
					this.gn[6].num = res.data.expired_count //过期数量
					this.gn[7].num = res.data.total_amount //积累数量
					this.$forceUpdate()
				})
			},
			ShangJiaInfoApi() {
				this.$request('/api/merchant/merchantInfo').then((res) => {
					console.log(res.data, '商家信息');
					this.ShangJiaInfo = res.data
					uni.setStorageSync('SJbalance',this.ShangJiaInfo.balance)
				})
			},
			DaoHnag() {
				uni.openLocation({
					latitude: Number(this.ShangJiaInf.latitude), // 目标位置的纬度
					longitude: Number(this.ShangJiaInf.longitude), // 目标位置的经度
					name: this.ShangJiaInf.address, // 目标位置的名称
					address: this.ShangJiaInf.addressaddress_detail, // 目标位置的地址
					scale: 18 // 地图缩放级别，范围1-28
				});
			},
			LinkLqu() {
				uni.navigateTo({
					url: '/pages/Merchant/ShangJia_JL'
				})
			},
			Ccjianhb() {
				console.log('创建红包');
				uni.navigateTo({
					url: '/pages/Merchant/CJ_HB'
				})
			},
			BianJi() {
				uni.navigateTo({
					url: '/pages/Merchant/ShangJiainfo_Set'
				})
			},
			Csele(item) {
				for (var i = 0; i < this.sele.length; i++) {
					this.sele[i].isA = false
				}
				item.isA = true
				// 类型 类型 1=红包,2=优惠券,3=邀约,4=折扣价
				if (item.name == '全部') {
					this.type = 0
				} else if (item.name == '现金') {
					this.type = 1
				} else if (item.name == '优惠券') {
					this.type = 2
				} else if (item.name == '折扣') {
					this.type = 4
				} else if (item.name == '邀约') {
					this.type = 3
				}
				this.ShangJiaLisyApi()
			},
			Ctab(item) {
				for (var i = 0; i < this.tab.length; i++) {
					this.tab[i].isA = false
				}
				item.isA = true
			},
			Back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.sj {
		width: 100vw;
		min-height: 100vh;
		float: left;

		.message_top {
			width: 100%;
			height: 350rpx;
			position: relative;
			background: linear-gradient(180deg, #FBEADA 0%, #FFFFFF 100%);

			.message_top_title {
				width: 100%;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				position: absolute;
				left: 0;
				z-index: 2;
				display: flex;
				align-items: center;
				justify-content: center;

				.message_top_tab,
				.message_top_tab1 {
					width: 172rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 40rpx;
					border: 1rpx solid #F3DECA;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FE4925;
					text-align: center;
					line-height: 48rpx;
				}

				.message_top_tab1 {
					background: linear-gradient(270deg, #FE4624 0%, #FF8143 100%);
					color: #FFFFFF;
				}
			}

			.message_top_title>view:nth-child(1) {
				margin-right: 20rpx;
			}

			.message_top_title>view:nth-child(2) {
				margin-right: 40rpx;
			}

			.message_top_back {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				left: 30rpx;
				z-index: 9;
			}
		}

		.index_info {
			width: 690rpx;
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			left: 50%;
			top: 210rpx;
			transform: translate(-50%, 0);
			z-index: 9;
		}

		.index_info>view:nth-child(1) {
			width: 85%;
			height: 100%;
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}

		.index_info>view:nth-child(1)>view:nth-child(1) {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;
		}

		.index_info>view:nth-child(1)>view:nth-child(2) {
			width: 400rpx;
			height: 140rpx;
			position: relative;
		}

		.index_info>view:nth-child(1)>view:nth-child(2)>view:nth-child(1) {
			width: 100%;
			height: 50%;
			line-height: 70rpx;
		}

		.index_info>view:nth-child(1)>view:nth-child(2)>view:nth-child(2),
		.index_info>view:nth-child(1)>view:nth-child(2)>view:nth-child(3) {
			width: 130rpx;
			height: 44rpx;
			background: #FFEBE2;
			border-radius: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FF6421;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 10rpx;
		}

		.index_info>view:nth-child(1)>view:nth-child(2)>view:nth-child(3) {
			width: 230rpx;
			position: absolute;
			bottom: 16rpx;
			left: 135rpx;
		}

		.index_info>view:nth-child(2) {
			width: 128rpx;
			height: 48rpx;
			border-radius: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.index_images {
			width: 690rpx;
			height: 400rpx;
			border-radius: 10rpx;
			margin: 20rpx auto 0;
			overflow: hidden;
		}

		.index_map {
			width: 640rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 25rpx 0rpx rgba(88, 64, 64, 0.09);
			border-radius: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 25rpx;
			padding-right: 25rpx;
			margin: 20rpx auto 0;
		}

		.index_map>view:nth-child(1),
		.index_map>view:nth-child(2) {
			width: 70%;
			height: 100%;
			display: flex;
			align-items: center;
		}

		.index_map>view:nth-child(2) {
			width: 30%;
			justify-content: flex-end;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #F95518;
		}

		.textmap {
			width: 380rpx;
		}

		.index_js {
			width: 690rpx;
			height: auto;
			margin: 30rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}

		.index_js_text {
			width: 690rpx;
			height: auto;
			margin: 15rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #666666;
		}

		.index_data {
			width: 690rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 25rpx 0rpx rgba(88, 64, 64, 0.09);
			border-radius: 20rpx;
			margin: 20rpx auto 0;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}

		.index_data>view:nth-child(1) {
			width: 630rpx;
			height: auto;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.index_data>view:nth-child(1)>view {
			width: 140rpx;
			// height: 79rpx;
			margin-bottom: 15rpx;

		}

		.index_data>view:nth-child(1)>view>view:nth-child(1),
		.index_data>view:nth-child(1)>view>view:nth-child(2) {
			width: 100%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.index_data>view:nth-child(1)>view>view:nth-child(2) {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #999999;
			margin-top: 10rpx;
		}

		.index_data>view:nth-child(2) {
			width: 630rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40rpx auto 0;
		}

		.index_data>view:nth-child(2)>view {
			width: 300rpx;
			height: 72rpx;
			border-radius: 40rpx;
			border: 2rpx solid #FE4825;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FE4925;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.index_data>view:nth-child(2)>view:nth-child(2) {
			background: linear-gradient(270deg, #FE4624 0%, #FF8143 100%);
			color: #FFFFFF;
		}

		.index_sele {
			width: 690rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;

			.index_sele_tab,
			.index_sele_tab1 {
				width: 116rpx;
				height: 48rpx;
				background: #F2F2F2;
				border-radius: 30rpx;
				text-align: center;
				line-height: 48rpx;
			}

			.index_sele_tab1 {
				background: linear-gradient(270deg, #FE4624 0%, #FF8143 100%);
				color: #FFFFFF;
			}
		}

		.index_for {
			width: 690rpx;
			height: 422rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 25rpx 0rpx rgba(88, 64, 64, 0.09);
			border-radius: 20rpx;
			margin: 30rpx auto 0;

			.index_for_one {
				width: 630rpx;
				height: 92rpx;
				border-bottom: 2rpx solid #ECECEC;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;

				.index_for_one_L,
				.index_for_one_R {
					width: 60%;
					height: 100%;
					display: flex;
					align-items: center;
				}

				.index_for_one_R {
					width: 40%;
					justify-content: flex-end;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FE4624;
				}

				.index_for_one_L>view:nth-child(1) {
					width: 31rpx;
					height: 31rpx;
					text-align: center;
					line-height: 31rpx;
					margin-right: 20rpx;
				}

				.index_for_one_LHb {
					width: 56rpx;
					height: 32rpx;
					background: rgba(254, 72, 37, 0.2);
					border-radius: 4rpx;
					border: 2rpx solid #FE4825;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FE4825;
					text-align: center;
					line-height: 32rpx;
					margin-right: 5px;
				}
			}

			.index_for_two {
				width: 630rpx;
				height: 54rpx;
				display: flex;
				align-items: center;
				margin: 20rpx auto 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;

				.index_for_two_L {
					width: 170rpx;
					height: 100%;
					position: relative;
					display: flex;
					align-items: center;
				}

				.index_for_two_L>view {
					width: 54rpx;
					height: 54rpx;
					border-radius: 50%;
					background-color: greenyellow;
					overflow: hidden;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(0, -50%);
				}

				.index_for_two_L>view:nth-child(1) {
					left: 0;
					z-index: 1;
				}

				.index_for_two_L>view:nth-child(2) {
					left: 40rpx;
					z-index: 2;
					background-color: grey;
				}

				.index_for_two_L>view:nth-child(3) {
					left: 70rpx;
					z-index: 3;
					background-color: red;
				}

				.index_for_two_L>view:nth-child(4) {
					left: 100rpx;
					z-index: 4;
					background-color: hotpink;
				}

				.index_for_two_R {
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				.index_for_two_R>view {
					width: 18rpx;
					height: 22rpx;
					text-align: center;
					line-height: 24rpx;
					margin-left: 6rpx;
				}
			}

			.index_for_therr {
				width: 630rpx;
				height: auto;
				margin: 20rpx auto 0;
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #888888;
			}

		}
	}
</style>